<template>
  <div class="cyIndex">
    <!-- 轮播图 -->
    <div class="lunbotu">
      <mt-swipe :auto="4000" :showIndicators="false" ref="swipe" @change="indexChange">
        <mt-swipe-item v-for="(item,index) in lunboImg" :key="index" >
          <img :src="item.image" alt="" @click="toGoodDesc(item.tag2)">
        </mt-swipe-item>
      </mt-swipe>
      <!-- <div class="content_index flex">
        <div class="category">{{ activeTag }}</div>
        <div class="feature">{{ activeTitle }}</div>
        <ul class="indicators">
          <li v-for="(item, index) in lunboImg" :key="index" :class="{active : index == activeIndex }"></li>
        </ul>
      </div> -->
    </div>
    <!-- 产品列表 -->
    <div class="good_list">
      <p class="list_title fff">试饮列表</p>
      <div class="good_item fff" v-for="(item,index) in goodList" :key="index" @click="toGoodDesc(item.id)">
        <div class="img">
          <img :src="item.image" alt="">
          <p>{{ item.name }}</p>
          <div class="shadeItem" v-show="item.countShow !== 1">
            <span class="expect" v-if="item.countShow === 2">敬请<br>期待</span>
            <span class="end" v-else >本期已结束</span>
          </div>
        </div>
        <div class="text_info">
          <p class="item_title">{{ item.tag1 }}<span>市场价值:{{ parseInt(item.price) }}元</span></p>
          <div class="item_counttime flex">
            <span v-show="item.countShow == 1">距离结束：{{ day }}天{{ hour }}小时{{ minute }}分{{ second }}秒 &nbsp;(活动时间内每晚8点开始)</span>
            <span v-show="item.countShow == 0">活动已结束</span>
            <span v-show="item.countShow == 2">开始时间：{{ item.start_time }} &nbsp;(活动时间内每晚8点开始)</span>
          </div>
          <ul class="tags flex">
            <li v-for="(tagItem,tagIndex) in item.feature" :key="tagIndex">{{ tagItem }}</li>
          </ul>
          <!-- 进度条 -->
          <div class="project_progress_wrap fff">
            <div class="project_progress">
              <div class="ppContent" :style="{ width: item.percent > 100 ? 100 + '%' : item.percent + '%' }"></div>
            </div>
            <!-- 进度条指示标 -->
            <div class="plan" :style="{left: item.percent > 92 ? 92 + '%' :(item.percent - 1)+ '%' }"><span>{{ item.percent}}%</span></div>
          </div>
          <!-- 项目数据 -->
          <div class="projectData fff" v-show="item.countShow !== 0">
            <!-- 剩余 -->
            <div class="residue">
              <span>今日剩余{{ item.buy_number - item.buy_limit_number_everyday > 0 ? 0:item.buy_limit_number_everyday - item.buy_number }}份</span>
            </div>
            <!-- 已领 -->
            <div class="yet">
              <span>已领{{ item.buy_number }}份</span>
            </div>
            <!-- 限量 -->
            <div class="limit">
              <span>限量{{ item.buy_limit_number_everyday }}份/天</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">
      <p>备案号：闽ICP备17029405号</p>
      <p>Copyright ©2017 chamiw.com</p>
    </div>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import login from "@/utils/login";
import getCode from "@/utils/getCode";
import getUrlParams from "@/utils/getUrlParams.js";
import {
  getLunBoImg,
  countView,
  wxCodeLogin,
  getSign,
  getGood
} from "@/api/index";
import { getTeaSamplesList } from "@/api/chayang";
export default {
  data() {
    return {
      loadShow: true,
      lunboImg: [],
      goodList: [],
      activeTag: "",
      activeTitle: "",
      activeIndex: 0,
      urlParams: {
        good_id: "",
        username: "",
        ad: "",
        platform: ""
      },
      kefu_tel: this.$store.state.kefu_tel,
      code: "",
      title: "",
      description: "",
      imgUrl: "",
      residue: "",
      day: "",
      hour: "",
      minute: "",
      second: "",
      countTime: ""
    };
  },
  created() {
    getUrlParams(this);
    getGood(this.urlParams.good_id).then(result => {
      this.title = result.data.name;
      this.description = result.data.feature;
      this.imgUrl = result.data.image;
      this.$store.commit("SETPAGEINFO", {
        title: this.title,
        description: this.description
      });
    });
    login(this);
    getCode(this);
    wxCodeLogin(this.code).then(result => {});
    getSign(location.href.split("#")[0]).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {
        wx.onMenuShareTimeline({
          title: this.title, // 分享标题
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          success: function() {
            // 用户点击了分享后执行的回调函数
            // mui.alert("分享朋友圈成功");
          },
          cancel: function() {
            // mui.alert("您确定不分享了吗？");
          }
        });
        wx.onMenuShareAppMessage({
          title: this.title, // 分享标题
          desc: this.description, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
            // 用户点击了分享后执行的回调函数
            // mui.alert("分享给好友成功");
          },
          cancel: function() {
            // mui.alert("取消分享");
          }
        });
      });
      wx.error(function(res) {
        // alert(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    });
    this.$store.commit("SETURLPARAMS", this.urlParams);
    const now = new Date().getTime();
    getLunBoImg("LCY_INDEX_TOP").then(result => {
      this.lunboImg = result.data;
      this.activeTag = this.lunboImg[0].tag1;
      this.activeTitle = this.lunboImg[0].title;
    });
    getTeaSamplesList(0, 10)
      .then(result => {
        this.goodList = result.data.list;
        this.goodList.forEach(item => {
          item.percent =
            item.buy_number / item.buy_limit_number_everyday * 100 > 100
              ? 100
              : item.buy_number / item.buy_limit_number_everyday * 100;
          let endDate = new Date(item.end_time.replace(/-/g, "/")).getTime();
          let startDate = new Date(
            item.start_time.replace(/-/g, "/")
          ).getTime();
          switch (true) {
            case endDate < now:
              item.countShow = 0;
              item.percent = 100;
              break;
            case now < endDate && now > startDate:
              item.countShow = 1;
              this.residue = (endDate - now) / 1000;
              break;
            case now < startDate:
              item.countShow = 2;
              break;
          }
        });
      }) //倒计时
      .then(() => {
        this.countTime = setInterval(() => {
          this.residue--;
          this.day = Math.floor(this.residue / 3600 / 24) + "";
          this.hour = Math.floor((this.residue / 3600) % 24) + "";
          this.minute = Math.floor((this.residue % 3600) / 60) + "";
          this.second = Math.floor((this.residue % 3600) % 60) + "";
          this.loadShow ? this.loadShow = false : true;
        }, 1000);
      });

    var view = this.urlParams;
    view.page_url = location.href;
    view.pid = this.urlParams.good_id;
    countView(view).then(result => {
      this.$store.commit("SETKEFUTEL", result.data.service_tel);
      this.kefu_tel = result.data.service_tel;
    });
  },
  beforeDestroy() {
    clearInterval(this.countTime);
  },
  methods: {
    indexChange() {
      this.activeIndex = this.$refs.swipe.index;
      this.activeTag = this.lunboImg[this.$refs.swipe.index].tag1;
      this.activeTitle = this.lunboImg[this.$refs.swipe.index].title;
    },
    toGoodDesc(id) {
      this.$router.push(
        "/chayangItem?good_id=" +
          id +
          "&username=" +
          this.$store.state.urlParams.username +
          "&platform=" +
          this.$store.state.urlParams.platform
      );
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
@import "@/style/mintui.scss";
.cyIndex {
  font-size: to(24);
  // padding-bottom: to(71);
  .lunbotu {
    position: relative;
    .mint-swipe {
      height: to(320);
      .mint-swipe-item {
        background-color: #000;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .is-active {
        background-color: pink;
      }
    }
    .content_index {
      height: to(43);
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: white;
      .category {
        flex: 2;
        background-color: rgba(95, 13, 13, 1);
        text-align: center;
        line-height: to(43);
      }
      .feature {
        flex: 9;
        line-height: to(43);
        padding-left: to(18);
      }
      ul {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        // transform: scale(.25);
        li {
          width: to(20);
          height: to(20);
          background-color: #fff;
          float: left;
          border-radius: 50%;
          // margin: 0 to(8);
          transform: scale(0.5);
          &.active {
            background-color: #5f0d0d;
          }
        }
      }
    }
  }
  .good_list {
    .list_title {
      margin: to(18) 0;
      height: to(60);
      line-height: to(60);
      padding-left: to(40);
      position: relative;
      font-size: to(26);
      color: #333;
      background-color: #ddd;
      &::after {
        content: " ";
        width: to(4);
        height: to(24);
        background-color: #6f4e00;
        position: absolute;
        left: to(15);
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .good_item {
      background-color: #fff;
      margin-bottom: to(13);
      padding: 0 to(15);
      .img {
        position: relative;
        img {
          width: 100%;
          height: to(305);
          display: block;
        }
        .shadeItem {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          top: 0;
          left: 0;
          .expect {
            font-size: to(55);
            padding: to(15);
            // color: white;
            position: absolute;
            width: to(160);
            background-color: rgba(255, 255, 255, 0.6);
            height: to(160);
            line-height: to(80);
            border-radius: 50%;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-weight: 600;
          }
          .end {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: rgba(255, 255, 255, 0.6);
            font-size: to(50);
            padding: to(12) to(20);
            text-align: center;
          }
        }
        p {
          position: absolute;
          bottom: 0;
          left: 0;
          height: to(44);
          line-height: to(44);
          width: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          text-indent: to(15);
        }
      }
      .item_title {
        color: #720000;
        font-size: to(28);
        line-height: to(50);
        margin-top: to(15);
        span {
          float: right;
          color: #5c5c5c;
          font-size: to(23);
        }
      }
      .item_counttime {
        font-size: to(22);
        line-height: to(50);
        justify-content: space-between;
        span {
          &:nth-child(1) {
            color: #000;
            flex: 8;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: 500;
          }
        }
      }
      // 项目标签
      .tags {
        margin: to(10) 0;
        li {
          background-color: #d4d4d4;
          color: #525252;
          padding: to(2) to(18);
          border-radius: to(5);
          margin: to(0) to(8);
          line-height: to(36);
          font-size: to(18);
          text-align: center;
        }
      }
      // 进度条
      .project_progress_wrap {
        width: 100%;
        padding: to(20) to(0) to(30);
        box-sizing: border-box;
        position: relative;
        .plan {
          position: absolute;
          width: to(60);
          line-height: to(38);
          height: to(38);
          border: 1px solid #ff7878;
          background-color: #fff;
          color: #df4d4d;
          top: to(8);
          right: 0;
          font-size: to(60);
          border-radius: to(10);
          span {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            font-size: to(18);
            line-height: to(38);
            color: #df4d4d;
            text-align: center;
          }
        }
        .project_progress {
          width: 100%;
          height: to(14);
          background-color: #d9d9d9;
          // border: to(2) solid #c63d3d;
          border-radius: to(5);
          box-sizing: border-box;
          div {
            width: 50%;
            height: 100%;
            background-color: #ff7878;
            border-radius: to(5) 0 0 to(5);
          }
        }
      }
      // 数据
      .projectData {
        display: flex;
        div {
          flex: 1;
          height: to(60);
          &.yet {
            span {
              color: #e90505;
            }
          }
          span {
            font-size: to(22);
            display: block;
            text-align: center;
            color: #000;
            line-height: to(40);
          }
        }
      }
    }
  }
  // 底部版权
  .copyright {
    margin-top: to(15);
    padding: to(8) 0;
    background-color: #fff;
    p {
      text-align: center;
      color: #666;
      font-size: to(20);
      line-height: to(40);
      &:nth-child(2) {
        font-size: to(18);
        color: #999;
        line-height: to(30);
      }
    }
  }
}
</style>

